<template>
    <!-- 登录 -->
        <div class="loginWrapper">
            <div class="wrapper-content">
                <div class="wrapperPic">
                    <!-- <img src="./images/1banner.jpg" alt=""> -->
                </div>
                <div class="wrapperLogin">
                    <!-- 右侧登录 -->
                    <div class="login">
                        <div class="loginContainer">
                            <div class="tabR">
                                <a href="###">
                                    <img src="./images/login.png" alt="">
                                </a>
                            </div>
                            <div class="tabBar">
                                <ul class="tabStart">
                                    <li class="tabMes ">
                                        短信登录／注册
                                    </li>
                                    <li class="tabMes tabpas">
                                        密码登录
                                    </li>
                                </ul>
                            </div>
                            <!-- <div class="acount-from">
                                <div class="acount-from-tips">
                                    请仔细阅读
                                    <a href="###">豆瓣使用协议，隐私</a>
                                </div>
                                <form action="##">
                                    <div class="input-text inputOn clearFix">
                                        <span></span>
                                        <input type="text" placeholder="邮箱/用户名/手机号"  />
                                    </div>
                                    <div class="input-text inputOn clearFix">
                                        <span class="pwd"></span>
                                        <input type="text" placeholder="验证码" />
                                        <div class="getTest">
                                            <a href="###">获取验证码</a>
                                        </div>
                                    </div>
                                    <button class="btn">登录豆瓣</button>
                                </form type="button">
                                <div class="acount-from-lf">
                                    <p class="acount-from-link">
                                        收不到验证码
                                    </p>
                                </div>
                            </div> -->
                            <div class="acount-from">
                                <div class="acount-from-tips">
                                    <a href="###" class="tipsPas">找回密码</a>
                                </div>
                                <form action="###">
                                    <div class="input-text inputOn clearFix">
                                      <span></span>
                                      <input type="text" placeholder="邮箱/用户名/手机号" v-model="username" />
                                    </div>
                                    <div class="input-text inputOn clearFix">
                                      <span class="pwd"></span>
                                      <input type="text" placeholder="请输入密码" v-model="password" />
                                    </div>
                                    
                                    <button class="btn" @click.prevent="login">登录豆瓣</button>
                                </form type="button"> 
                                <div class="acount-from-lf">
                                    <p class="acount-from-link">
                                        海外手机登录
                                    </p>
                                </div>
                            </div>
                            <div class="acount-footer">
                                <p>第三方登录</p>
                                <div class="acount-img">
                                    <!-- <img src="./images/wchat.svg" alt="">
                                    <img src="./images/weibo.svg" alt=""> -->
                                    <a href="###" class="acoutn-img-fr"></a>
                                    <a href="###" class="acoutn-img-sc"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 左侧下载 -->
                    <div class="app">
                        <p class="app-title">豆瓣<span>6.0</span></p>
                        <a href="javascript:;" class="lnk-app">下载豆瓣App</a>
                        <div class="app-qr">
                            <a href="javascript:;" class="lnk-qr" id="expand-qr">
                                <img src="https://img3.doubanio.com/f/sns/0c708de69ce692883c1310053c5748c538938cb0/pics/sns/anony_home/icon_qrcode_green.png"
                                    width="28" height="28" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
export default {
    data() {
        return {
            username: '123455', // 收集用户名
            password: '111111', // 收集密码的
        }
    },
    methods: {
        login() {
            const { username, password } = this
            if (username !== '' && password !== '') {
                alert('已登录')
            } else {
                alert('手机号码或者密码不能为空')
                
            }   
        },
    },
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
//登录
        .loginWrapper{
            // width: 100%;
            height: 304px;
            
            //背景图片
            background-color:rgb(237, 244, 237);

            .wrapper-content{
                width: 1200px;
                margin: 0 auto;
                position: relative;
                .wrapperPic{
                    // width: 100%;
                    width: 1200px;
                    height: 304px;
                    background: url(./images/1banner.jpg) no-repeat;
                    background-size: 50%;
                    background-size: contain;
                    position: absolute;
                    left: -50px;
                    top: 0;
                }
                //右侧登录布局
                .wrapperLogin{
                    width: 300px;
                    height: 300px;
                    position: absolute;
                    right: 121px;
                    top: 0;
                    //右侧登录
                    .login{
                        width: 300px;
                        height: 300px;
                        // background: blue;
                        .loginContainer{
                            height: 260px;
                            width: 280px;
                            padding: 30px 10px 10px 10px;
                            overflow: hidden;
                            position: relative;
                            // background: pink;
                            .tabR{
                                position: absolute;
                                top: 11px;
                                right: 12px;
                                a{
                                    img{
                                        width: 30px;
                                        height: 30px;
                                    }
                                }
                            }
                            .tabBar{
                                width: 280px;
                                height: 28px;
                                margin-bottom: 10px;
                                .tabStart{
                                    display: flex;
                                    box-sizing: border-box;
                                    .tabMes{
                                        width: 50%;
                                        line-height: 28px;
                                        text-align: center;
                                        cursor: pointer;
                                        &.tabpas{
                                            font-weight: 600;
                                            border-bottom: 1px solid #494949
                                        }
                                    }
                                }
                            }
                            .acount-from{
                                width: 280px;
                                height: 150px;
                                // overflow: hidden;
                                // background: pink;
                                .acount-from-tips{
                                    width: 100%;
                                    height: 16px;
                                    font-size: 12px;
                                    margin-bottom: 10px;
                                    color: #9b9b9b;
                                    a{
                                        color:  #41ac52;
                                        &.tipsPas{
                                            float: right;
                                        }
                                    }
                                }
                                .input-text{
                                    width: 280px;
                                    height: 30px;
                                    position: relative;
                                    input{
                                        box-sizing: border-box;
                                        width: 100%;
                                        height: 100%;
                                        padding: 8px 10px;
                                        outline: none;
                                        border: none;
                                    }
                                    &.inputOn{
                                        margin-bottom: 10px;
                                    }    
                                    .getTest{
                                        width: 65px;
                                        height: 35px;
                                        padding: 0 10px;
                                        position: absolute;
                                        top: 0;
                                        right: 0;
                                        a{
                                            font-size: 13px;
                                            display: block;
                                            height: 100%;
                                            line-height: 30px;
                                            color: #41ac52;
                                        }
                                    }
                                }
                                .btn{
                                    width: 280px;
                                    height: 34px;
                                    line-height: 34px;
                                    font-weight: 400;
                                    font-size: 15px;
                                    background-color: rgba(66,189,86,.5);
                                    border: none;
                                    font-weight: 400;
                                    color: white;
                                    cursor: pointer;
                                    outline: none;
                                    &:hover{
                                        background-color: #00B51D;
                                    }
                                }
                                .acount-from-lf{
                                    width: 100%;
                                    height: 40px;
                                    overflow: hidden;
                                    border-bottom: 1px solid #ddd;
                                    .acount-from-link{
                                        float: right;
                                        margin: 10px;
                                        font-size: 13px;
                                        color: #41ac52;
                                    }
                                }
                            }
                            .acount-footer{
                                position: absolute;
                                bottom: 15px;
                                left: 10px;
                                width: 280px;
                                height: 30px;
                                display: flex;
                                align-items: center;
                                p{
                                    color: #9b9b9b;
                                    font-size: 11px;
                                    text-align: center;
                                    display: block;
                                    margin-right: 20px;
                                }
                                .acount-img{
                                    display: flex;
                                    a{
                                        display: block;
                                        width: 25px;
                                        height: 25px;
                                        background: url(./images/wchat.svg) no-repeat;
                                        background-position: 50% 50%;
                                        background-color: transparent;
                                        background-size: 100% 100%;
                                        margin-right: 20px;
                                        &.acoutn-img-sc{
                                            background: url(./images/weibo.svg) no-repeat;
                                            background-position: 50% 50%;
                                            background-color: transparent;
                                            background-size: 100% 100%;
                                        }
                                    }
                                    
                                }
                            }
                        }       
                    }
                    // 左侧下载
                    .app{
                        position: absolute;
                        top: 95px;
                        left: -198px;
                        .app-title{
                            font-size: 25px;
                            font-weight: 400;
                            margin-bottom: 20px;
                            span{
                                margin-left: 10px;
                            }
                        }
                        .lnk-app{
                            width: 72px;
                            height: 12px;
                            padding: 9px 21px;
                            line-height: 12px;
                            display: block;
                            background: #00B51D;
                            color: white;
                            font-size: 12px;
                        }
                        .app-qr{
                            a{
                            img{
                                border: 1px solid  #00B51D;
                            }
                                
                            }
                            position: absolute;
                            bottom: -3px;
                            right: -35px;
                        }
                    }
                }
            }
        }
        
</style>